Các Mẫu React Portal: Chiến Lược Triển Khai Modal và Overlay

React Portals cung cấp một cách mạnh mẽ để render các phần tử con vào một nút DOM nằm ngoài hệ thống phân cấp DOM của thành phần cha. Khả năng này đặc biệt hữu ích cho việc tạo modals, overlays, tooltips và các phần tử UI khác cần thoát khỏi các ràng buộc của vùng chứa cha của chúng. Hướng dẫn toàn diện này đi sâu vào các phương pháp hay nhất, kỹ thuật nâng cao và những cạm bẫy thường gặp khi sử dụng React Portals để xây dựng các modal và overlay dễ tiếp cận và hiệu suất cao cho một đối tượng toàn cầu.

React Portals là gì?

Trong các ứng dụng React thông thường, các thành phần được render trong cây DOM của các thành phần cha của chúng. Tuy nhiên, có những trường hợp hành vi mặc định này không mong muốn. Ví dụ, một hộp thoại modal có thể bị giới hạn bởi overflow hoặc stacking context của phần tử cha, dẫn đến các lỗi hình ảnh không mong muốn hoặc các tùy chọn định vị hạn chế. React Portals cung cấp một giải pháp bằng cách cho phép một thành phần render các phần tử con của nó vào một phần khác của DOM, thực sự "thoát" khỏi giới hạn của phần tử cha.

Về cơ bản, React Portal là một cách để render các phần tử con của một thành phần (có thể là bất kỳ nút React nào, bao gồm các thành phần khác) vào một nút DOM khác, nằm ngoài hệ thống phân cấp DOM hiện tại. Điều này được thực hiện bằng cách sử dụng hàm ReactDOM.createPortal(child, container). Đối số child là phần tử React bạn muốn render, và đối số container là phần tử DOM nơi bạn muốn render nó.

Cú pháp cơ bản

Dưới đây là một ví dụ đơn giản về cách sử dụng ReactDOM.createPortal:

            import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>This content is rendered outside the parent!</div>,
    document.getElementById('portal-root') // Replace with your container
  );
}

            

              
                Copy
              
            
          

Trong ví dụ này, nội dung của MyComponent sẽ được render bên trong nút DOM có ID 'portal-root', bất kể MyComponent nằm ở đâu trong cây thành phần React.

Tại sao nên sử dụng React Portals cho Modals và Overlays?

Sử dụng React Portals cho modals và overlays mang lại một số lợi thế chính:

• Tránh Xung đột CSS: Modals và overlays thường cần được định vị ở cấp cao nhất của ứng dụng, có khả năng xung đột với các kiểu được định nghĩa trong các thành phần cha. Portals cho phép bạn render các phần tử này bên ngoài phạm vi của phần tử cha, giảm thiểu xung đột CSS và đảm bảo định kiểu nhất quán. Hãy tưởng tượng một nền tảng thương mại điện tử toàn cầu nơi sản phẩm và kiểu modal của mỗi nhà cung cấp không nên xung đột với nhau. Portals có thể giúp đạt được sự cô lập này.
• Cải thiện Stacking Context: Modals thường yêu cầu z-index cao để đảm bảo chúng xuất hiện trên các phần tử khác. Nếu modal được render trong một phần tử cha có stacking context thấp hơn, z-index có thể không hoạt động như mong đợi. Portals bỏ qua vấn đề này bằng cách render modal trực tiếp dưới phần tử body (hoặc một vùng chứa cấp cao phù hợp khác), đảm bảo thứ tự xếp chồng mong muốn.
• Nâng cao Khả năng tiếp cận: Khi một modal được mở, bạn thường muốn khóa focus trong modal để đảm bảo người dùng bàn phím chỉ có thể điều hướng trong nội dung của modal. Portals giúp quản lý việc khóa focus dễ dàng hơn vì modal được render ở cấp cao nhất của DOM, đơn giản hóa việc triển khai logic quản lý focus. Điều này cực kỳ quan trọng khi xử lý các hướng dẫn về khả năng tiếp cận quốc tế như WCAG.
• Cấu trúc Thành phần Sạch: Portals giúp giữ cấu trúc thành phần React của bạn sạch sẽ và dễ bảo trì. Trình bày trực quan của một modal hoặc overlay thường tách biệt về mặt logic với thành phần kích hoạt nó. Portals cho phép bạn thể hiện sự tách biệt này trong cơ sở mã của mình.

Triển khai Modals bằng React Portals: Hướng dẫn từng bước

Hãy cùng tìm hiểu một ví dụ thực tế về việc triển khai một thành phần modal sử dụng React Portals.

Bước 1: Tạo Vùng chứa Portal

Đầu tiên, bạn cần một phần tử DOM nơi nội dung modal sẽ được render. Đây thường là một phần tử div được đặt trực tiếp bên trong thẻ body trong tệp index.html của bạn:

            <body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

            

              
                Copy
              
            
          

Bước 2: Tạo Thành phần Modal

Bây giờ, hãy tạo một thành phần Modal sử dụng ReactDOM.createPortal để render các phần tử con của nó vào vùng chứa modal-root:

            import ReactDOM from 'react-dom';
import React, { useEffect, useRef } from 'react';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, isOpen, onClose }) {
  const elRef = useRef(null);

  if (!elRef.current) {
    elRef.current = document.createElement('div');
  }

  useEffect(() => {
    if (isOpen) {
        modalRoot.appendChild(elRef.current);
        // Clean up when the component unmounts
        return () => modalRoot.removeChild(elRef.current);
    }

    // Clean up when the modal is closed and unmounted
    if (elRef.current && modalRoot.contains(elRef.current)) {
      modalRoot.removeChild(elRef.current);
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose} style={{position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
        <div className="modal-content" onClick={(e) => e.stopPropagation()} style={{backgroundColor: 'white', padding: '20px', borderRadius: '5px'}}>
            {children}
            <button onClick={onClose}>Close</button>
        </div>
    </div>,
    elRef.current // Using elRef to dynamically append and remove
  );
}

export default Modal;

            

              
                Copy
              
            
          

Thành phần này nhận children làm một prop, đại diện cho nội dung bạn muốn hiển thị bên trong modal. Nó cũng nhận isOpen (một giá trị boolean cho biết modal có nên hiển thị hay không) và onClose (một hàm để đóng modal).

Những lưu ý quan trọng trong triển khai này:

• Tạo Phần tử Động: Hook elRef và useEffect được sử dụng để tạo và thêm vùng chứa portal vào modal-root một cách động. Điều này đảm bảo rằng vùng chứa portal chỉ tồn tại trong DOM khi modal được mở. Điều này cũng cần thiết vì ReactDOM.createPortal mong đợi một phần tử DOM đã tồn tại.
• Render có Điều kiện: Prop isOpen được sử dụng để render modal một cách có điều kiện. Nếu isOpen là false, thành phần sẽ trả về null.
• Định kiểu Overlay và Nội dung: Thành phần bao gồm định kiểu cơ bản cho overlay và nội dung modal. Bạn có thể tùy chỉnh các kiểu này để phù hợp với thiết kế ứng dụng của mình. Lưu ý rằng các kiểu nội tuyến được sử dụng để đơn giản hóa trong ví dụ này, nhưng trong một ứng dụng thực tế, bạn có thể sẽ sử dụng các lớp CSS hoặc giải pháp CSS-in-JS.
• Lan truyền Sự kiện: onClick={(e) => e.stopPropagation()} trên modal-content ngăn chặn sự kiện click lan truyền lên modal-overlay, điều này có thể vô tình đóng modal.
• Dọn dẹp: Hook useEffect bao gồm một hàm dọn dẹp để loại bỏ phần tử được tạo động khỏi DOM khi thành phần bị unmount hoặc khi isOpen thay đổi thành false. Điều này quan trọng để ngăn chặn rò rỉ bộ nhớ và đảm bảo DOM luôn sạch.

Bước 3: Sử dụng Thành phần Modal

Bây giờ, bạn có thể sử dụng thành phần Modal trong ứng dụng của mình:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Trong ví dụ này, một nút kích hoạt việc mở modal. Thành phần Modal nhận các props isOpen và onClose để kiểm soát khả năng hiển thị của nó.

Triển khai Overlays bằng React Portals

Overlays, thường được sử dụng cho các chỉ báo tải, hiệu ứng nền hoặc thanh thông báo, cũng có thể hưởng lợi từ React Portals. Cách triển khai rất giống với modals, nhưng có một vài sửa đổi nhỏ để phù hợp với trường hợp sử dụng cụ thể.

Ví dụ: Loading Overlay

Hãy tạo một loading overlay đơn giản bao phủ toàn bộ màn hình trong khi dữ liệu đang được tải.

            import ReactDOM from 'react-dom';
import React, { useEffect, useRef } from 'react';

const overlayRoot = document.getElementById('overlay-root');

function LoadingOverlay({ isLoading, children }) {
  const elRef = useRef(null);

    if (!elRef.current) {
        elRef.current = document.createElement('div');
    }

    useEffect(() => {
        if (isLoading) {
            overlayRoot.appendChild(elRef.current);
            return () => overlayRoot.removeChild(elRef.current);
        }

        if (elRef.current && overlayRoot.contains(elRef.current)) {
            overlayRoot.removeChild(elRef.current);
        }
    }, [isLoading]);

  if (!isLoading) return null;

  return ReactDOM.createPortal(
    <div className="loading-overlay" style={{position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.3)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 9999}}>
      {children}
    </div>,
    elRef.current
  );
}

export default LoadingOverlay;

            

              
                Copy
              
            
          

Thành phần LoadingOverlay này nhận một prop isLoading, dùng để xác định liệu overlay có hiển thị hay không. Khi isLoading là true, overlay sẽ bao phủ toàn bộ màn hình với nền bán trong suốt.

Để sử dụng thành phần:

            import React, { useState, useEffect } from 'react';
import LoadingOverlay from './LoadingOverlay';

function App() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulate data fetching
    setTimeout(() => {
      setData({ message: 'Data loaded!' });
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      <LoadingOverlay isLoading={isLoading}>
        <p>Loading...</p>
      </LoadingOverlay>

      {data ? <p>{data.message}</p> : <p>Loading data...</p>}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Các Kỹ thuật Portal Nâng cao

1. Vùng chứa Portal Động

Thay vì mã hóa cứng các ID modal-root hoặc overlay-root, bạn có thể tạo động vùng chứa portal khi thành phần được mount. Cách tiếp cận này hữu ích nếu bạn cần kiểm soát nhiều hơn các thuộc tính hoặc vị trí của vùng chứa trong DOM. Các ví dụ trên đã sử dụng cách tiếp cận này.

2. Context Providers cho Mục tiêu Portal

Đối với các ứng dụng phức tạp, bạn có thể muốn cung cấp một context để chỉ định mục tiêu portal một cách động. Điều này cho phép bạn tránh truyền phần tử mục tiêu làm prop cho mọi thành phần sử dụng portal. Ví dụ, bạn có thể có một PortalProvider làm cho phần tử modal-root có sẵn cho tất cả các thành phần trong phạm vi của nó.

            import React, { createContext, useContext, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContext = createContext(null);

function PortalProvider({ children }) {
  const portalRef = useRef(document.createElement('div'));

  useEffect(() => {
    const portalNode = portalRef.current;
    portalNode.id = 'portal-root';
    document.body.appendChild(portalNode);
    return () => {
      document.body.removeChild(portalNode);
    };
  }, []);

  return (
    <PortalContext.Provider value={portalRef.current}>
      {children}
    </PortalContext.Provider>
  );
}

function usePortal() {
  const portalNode = useContext(PortalContext);
  if (!portalNode) {
    throw new Error('usePortal must be used within a PortalProvider');
  }
  return portalNode;
}

function Portal({ children }) {
  const portalNode = usePortal();
  return ReactDOM.createPortal(children, portalNode);
}

export { PortalProvider, Portal };

            

              
                Copy
              
            
          

Cách sử dụng:

            import { PortalProvider, Portal } from './PortalContext';

function App() {
  return (
    <PortalProvider>
      <div>
        <p>Some content</p>
        <Portal>
          <div style={{ backgroundColor: 'red', padding: '10px' }}>
            This is rendered in the portal!
          </div>
        </Portal>
      </div>
    </PortalProvider>
  );
}

            

              
                Copy
              
            
          

3. Các cân nhắc về Server-Side Rendering (SSR)

Khi sử dụng React Portals trong các ứng dụng được render phía máy chủ (SSR), bạn cần đảm bảo rằng vùng chứa portal tồn tại trong DOM trước khi thành phần cố gắng render. Trong quá trình SSR, đối tượng document không có sẵn, vì vậy bạn không thể trực tiếp truy cập document.getElementById. Một cách tiếp cận là render nội dung portal có điều kiện chỉ ở phía client, sau khi thành phần đã mount. Một cách tiếp cận khác là tạo vùng chứa portal trong HTML được render phía máy chủ và đảm bảo nó có sẵn khi thành phần React hydrate ở phía client.

Các cân nhắc về Khả năng tiếp cận

Khi triển khai modals và overlays, khả năng tiếp cận là tối quan trọng để đảm bảo trải nghiệm tốt cho tất cả người dùng, đặc biệt là những người khuyết tật. Dưới đây là một số cân nhắc chính về khả năng tiếp cận:

• Quản lý Focus: Như đã đề cập trước đó, việc khóa focus là rất quan trọng đối với khả năng tiếp cận của modal. Khi modal mở, focus sẽ tự động được chuyển đến phần tử có thể focus đầu tiên trong modal. Khi modal đóng, focus sẽ quay trở lại phần tử đã kích hoạt modal. Các thư viện như focus-trap-react có thể giúp đơn giản hóa việc quản lý focus.
• Thuộc tính ARIA: Sử dụng các thuộc tính ARIA để cung cấp thông tin ngữ nghĩa về vai trò và trạng thái của modal. Ví dụ, sử dụng role="dialog" hoặc role="alertdialog" trên vùng chứa modal để chỉ ra mục đích của nó. Sử dụng aria-modal="true" để chỉ ra rằng modal là modal (tức là nó ngăn chặn tương tác với phần còn lại của trang).
• Điều hướng bằng Bàn phím: Đảm bảo rằng tất cả các phần tử tương tác trong modal có thể truy cập được bằng bàn phím. Người dùng có thể điều hướng qua nội dung của modal bằng phím Tab và tương tác với các phần tử bằng phím Enter hoặc Space.
• Tương thích với Trình đọc màn hình: Kiểm tra modal của bạn với trình đọc màn hình để đảm bảo rằng nó được thông báo đúng cách và nội dung có thể truy cập được. Cung cấp nhãn mô tả và văn bản thay thế cho tất cả hình ảnh và các phần tử tương tác.
• Độ tương phản và Màu sắc: Đảm bảo độ tương phản đủ giữa màu văn bản và màu nền để đáp ứng các nguyên tắc về khả năng tiếp cận. Xem xét những người dùng bị suy giảm thị lực có thể dựa vào phóng đại màn hình hoặc cài đặt độ tương phản cao.

Tối ưu hóa Hiệu suất

Mặc dù bản thân React Portals không gây ra các vấn đề về hiệu suất, nhưng các modal và overlay được triển khai kém có thể ảnh hưởng đến hiệu suất ứng dụng. Dưới đây là một số mẹo để tối ưu hóa hiệu suất:

• Lazy Loading: Nếu nội dung modal phức tạp hoặc chứa nhiều hình ảnh, hãy cân nhắc lazy loading nội dung để cải thiện thời gian tải trang ban đầu.
• Memoization: Sử dụng React.memo để ngăn chặn việc render lại không cần thiết của thành phần modal và các phần tử con của nó.
• Virtualization: Nếu modal chứa một danh sách lớn các mục, hãy sử dụng thư viện ảo hóa như react-window hoặc react-virtualized để chỉ render các mục hiển thị.
• Debouncing và Throttling: Nếu hành vi của modal được kích hoạt bởi các sự kiện thường xuyên (ví dụ: thay đổi kích thước cửa sổ), hãy sử dụng debouncing hoặc throttling để giới hạn số lần cập nhật.
• CSS Transitions và Animations: Sử dụng các hiệu ứng chuyển tiếp và hoạt ảnh CSS thay vì hoạt ảnh dựa trên JavaScript để có hiệu suất mượt mà hơn.

Những Cạm Bẫy Thường Gặp và Cách Tránh

• Quên Dọn dẹp: Luôn dọn dẹp vùng chứa portal khi thành phần bị unmount để tránh rò rỉ bộ nhớ và ô nhiễm DOM. Hook useEffect cho phép dọn dẹp dễ dàng.
• Sai Stacking Context: Kiểm tra kỹ z-index của vùng chứa portal và các phần tử cha của nó để đảm bảo rằng modal hoặc overlay xuất hiện trên các phần tử khác.
• Các Vấn đề về Khả năng tiếp cận: Bỏ qua khả năng tiếp cận có thể dẫn đến trải nghiệm người dùng kém cho những người khuyết tật. Luôn tuân thủ các nguyên tắc về khả năng tiếp cận và kiểm tra modals của bạn bằng các công nghệ hỗ trợ.
• Xung đột CSS: Lưu ý các xung đột CSS giữa nội dung portal và phần còn lại của ứng dụng. Sử dụng các mô-đun CSS, styled components hoặc giải pháp CSS-in-JS để cô lập các kiểu.
• Các Vấn đề xử lý Sự kiện: Đảm bảo rằng các trình xử lý sự kiện trong nội dung portal được liên kết đúng cách và các sự kiện không vô tình lan truyền đến các phần khác của ứng dụng.

Các Giải pháp thay thế cho React Portals

Mặc dù React Portals thường là giải pháp tốt nhất cho modals và overlays, có những cách tiếp cận thay thế mà bạn có thể cân nhắc:

• Giải pháp dựa trên CSS: Trong một số trường hợp, bạn có thể đạt được hiệu ứng hình ảnh mong muốn chỉ bằng CSS, mà không cần React Portals. Ví dụ, bạn có thể sử dụng position: fixed và z-index để định vị một modal ở cấp cao nhất của ứng dụng. Tuy nhiên, cách tiếp cận này có thể khó quản lý hơn và có thể dẫn đến xung đột CSS.
• Thư viện bên thứ ba: Có nhiều thư viện thành phần React của bên thứ ba cung cấp các thành phần modal và overlay được xây dựng sẵn. Các thư viện này có thể giúp bạn tiết kiệm thời gian và công sức, nhưng chúng có thể không luôn tùy chỉnh được theo nhu cầu cụ thể của bạn.

Kết luận

React Portals là một công cụ mạnh mẽ để xây dựng các modal và overlay dễ tiếp cận và hiệu suất cao. Bằng cách hiểu rõ những lợi ích và hạn chế của Portals, và tuân thủ các phương pháp hay nhất về khả năng tiếp cận và hiệu suất, bạn có thể tạo ra các thành phần UI giúp nâng cao trải nghiệm người dùng và cải thiện chất lượng tổng thể của các ứng dụng React của mình. Từ các nền tảng thương mại điện tử với nhiều mô-đun dành riêng cho nhà cung cấp đến các ứng dụng SaaS toàn cầu với các phần tử UI phức tạp, việc nắm vững React Portals sẽ giúp bạn tạo ra các giải pháp front-end mạnh mẽ và có khả năng mở rộng.